<template>
  <div class="pie-wrap" :style="{ width: width, height: height }">
    <div class="pie" ref="pie"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    typePieData: {
      default: () => [],
    },
    colors: {
      default: () => [
        "rgba(50,123,250,0.7)",
        "rgba(244,201,7,0.7)",
        "rgba(23,216,161,0.7)",
        "rgba(122,60,235,0.7)",
        "rgba(15,197,243,0.7)",
      ],
    },
  },
  data() {
    return {
      option: null,
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.pie);
    this.setOption(this.typePieData);
    window.onresize = () => {
      this.chart.resize();
    };
  },
  watch: {
    typePieData(newValue) {
      this.setOption(newValue);
    },
  },
  methods: {
    setOption(newValue) {
      this.option = {
        title: {
          text: "类别占比",
          top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "400",
          },
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b} : {c} ({d}%)",
        // },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "类别占比",
            type: "pie",
            radius: ["50%", "90%"],
            center: ["50%", "50%"],
            roseType: "radius",
            // label: {
            //   show: true,
            //   normal: {
            //     color: "#fff",
            //     position: "outside",
            //     fontSize: 16,
            //   },
            //   formatter: "{b}: {d}",
            // },
            // labelLine: {
            //   length: 1,
            //   length2: 20,
            //   smooth: true,
            // },
            data: newValue.map((item, i) => {
              return {
                value: item.num,
                name: item.typeName,
                itemStyle: {
                  color: this.colors[i],
                  // borderColor: "rgba(50,123,250,1)",
                  borderWidth: 1,
                },
              };
            }),
          },
        ],
      };
      this.chart.setOption(this.option);
    },
  },
};
</script>

<style lang="scss" scoped>
.pie-wrap {
  width: 100%;
}
.pie {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>